<script setup lang="ts">
import {ref, watchEffect} from "vue";
import {useRoute} from "vue-router";


interface IHeaderBreadCrumb {
    name: string;
    path: string;
}


const route = useRoute();
const breadCrumbs = ref<IHeaderBreadCrumb[]>([]);


/**
 * 设置面包屑
 */
const setBreadCrumbs = () => {
    const matched: IHeaderBreadCrumb[] = route.matched.filter((breadCrumb) => breadCrumb.meta.breadcrumb).map((breadCrumb) => ({
        name: breadCrumb.meta.breadcrumb as string,
        path: breadCrumb.path,
    }));

    if (route.path === "/") {
        breadCrumbs.value = [{
            name: "Home",
            path: "/"
        }];
    }

    breadCrumbs.value = matched;
}


watchEffect(() => {
    setBreadCrumbs();
})
</script>

<template>
    <div class="header-bread-crumb">
        <n-breadcrumb>
            <n-breadcrumb-item v-for="(breadcrumb, index) in breadCrumbs" :key="index">
                {{ breadcrumb.name }}
            </n-breadcrumb-item>
        </n-breadcrumb>
    </div>
</template>

<style lang="less">

</style>